iT邦幫忙

0
鐵人賽 神助攻 HERE Technologies

HERE MAP API系列文章Part 2-Geolocation

  • 分享至 

  • xImage
  •  

在 Part 1 地圖底圖準備好的基礎之上,我們增加一個獲取瀏覽器當前位置並持續更新的功能,來解決“Where am I ?”的問題。

具體可以通過瀏覽器的 Geolocation API 來實現。在app.js 腳本中,使用 navigator.geolocation 對象來訪問此API。 navigator.geolocation 對象有這樣幾個方法:getCurrentPosition(),watchPosition(),clearWatch(), 可以幫助我們實現開始的需求。

1 獲取位置
首先,通過 getCurrentPosition() 一次性獲取瀏覽器當前位置,在 app.js 中使用如下程式碼

https://ithelp.ithome.com.tw/upload/images/20200922/20129797RuJp5DT2sf.jpg

各個瀏覽器都有支援 Geolocation API ,建議參考相關的幫助文檔。這個Demo建議在 Firefox 中測試,因為Chrome似乎禁用從本地文件訪問位置。你可以根據需要增加獲取位置是否成功後的行為,詳情查看 Firefox的開發者文檔

https://ithelp.ithome.com.tw/upload/images/20200922/20129797xmxWgJdhiQ.jpg

2 持續更新位置
watchPosition() 用於持續“關注” 客戶端位置的變化,在每次變化之後,都會將新的位置返回。在 app.js 中增加如下程式碼,用於在當前位置不斷地顯示“冰淇淋”

https://ithelp.ithome.com.tw/upload/images/20200922/20129797lp9thI26Am.jpg

https://ithelp.ithome.com.tw/upload/images/20200922/201297970hxCeFqFlH.jpg

original resource Part2: Geolocation
complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream
• 作者: Xiaoyan Mu
• 部落格連結: https://www.kikitamap.com/2019/03/05/Icecream_Part1_Basemap_Setup/
• 著作權: The author owns the copyright, please indicate the source reproduced.


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言